<script setup lang="ts">
import {ref} from 'vue';


const switchHeadDisplay = () => {
}

const visible = ref(false);
const openSettings = () => {
  opendrawer()
}
const clickok = () => {
  closedrawer()
}
const clickCancel = () => {
  closedrawer()
}
//点击关闭drawer
const closedrawer = () => {
  visible.value = false;
};
//点击打开drawer
const opendrawer = () => {
  visible.value = true;

};

</script>

<template>
  <a-drawer :width="340" :visible="visible" @ok="clickok" @cancel="clickCancel" unmountOnClose>
    <template #title>
      设置
    </template>
    <div class="w100 h100 drawermain">
      <div class="w100  flex">
        <div class="w100">
          显示头部菜单
        </div>
        <a-switch @change="switchHeadDisplay" :default-checked="false"/>
      </div>
    </div>
  </a-drawer>
  <a-space size="large" class="headMenu">
    <a-avatar>A</a-avatar>
    <a-avatar :style="{ backgroundColor: '#3370ff' }" @click="openSettings">
      <icon-settings/>
    </a-avatar>
    <a-avatar :style="{ backgroundColor: '#14a9f8' }">Arco</a-avatar>
    <a-avatar :style="{ backgroundColor: '#00d0b6' }">Design</a-avatar>
    <a-avatar>
      <img
          alt="avatar"
          src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
      />
    </a-avatar>
  </a-space>
</template>

<style scoped lang="scss">

</style>
